<template>
  <div>
    <label v-if="label" :class="{'i-form-item-label-required' : isRequired}">{{ label }}</label>
    <div>
      <slot></slot>
      <div v-if="validateState === 'error'" class="i-form-item-message">{{ validateMessage}}</div>
    </div>
  </div>
</template>
<script>
import Emitter from "../../mixins/emitter";
const AsyncValidator = require("async-validator");
export default {
  name: "iFormItem",
  inject: ["form"],
  mixins: [Emitter],
  props: {
    label: {
      type: String,
      default: ""
    }
  },
  prop: {
    type: String
  },
  data() {
    return {
      isRequired: false, //是否为必填
      validateState: "", //校验状态
      validateMessage: "" //校验不通过时的提示信息
    };
  },
  computed: {
    fieldValue() {
      return this.forrm.model[this.prop];
    }
  },
  mounted() {
    if (this.prop) {
      this.dispatch("iForm", "on-form-item", this);

      this.initialValue = this.fieldValue;
      this.setRules();
    }
  },
  beforeDestroy() {
    this.dispatch("iForm", "on-form-item", this);
  },
  methods: {
    setRules() {
      let rules = this.getRules();
      if (rules.length) {
        rules.every(rule => {
          this.isRequired = rule.required;
        });
      }
      this.$on("on-form-blur", this.onFieldBlur);
      this.$on("on-form-change", this.onFieldChange);
    },

    getRules() {
      let formRules = this.form.rules;
      formRules = formRules ? formRules[this.prop] : [];
      return [].concat(formRules || []);
    },

    //重置数据
    resetField() {
      this.validateState = "";
      this.validateMessage = "";

      this.form.model[this.prop] = this.initialValue;
    },

    getFilteredRule(trigger) {
      const rules = this.getRules();
      return rules.filter(
        rule => !rule.trrigger || rule.trigger.indexOf(trigger) !== -1
      );
    },

    validate(trigger, callback = function() {}) {
      debugger
      let rules = this.getFilteredRule(trigger);
      if (!rules || rules.length === 0) {
        return true;
      }

      this.validateState = "validating";
      let descriptor = {};
      descriptor[this.prop] = rules;

      const validator = new AsyncValidator(descriptor);
      let model = {};

      model[this.prop] = this.fieldValue;
      validator.validate(model, { firstFields: true }, errors => {
        this.validateState = !errors ? "success" : "error";
        this.validateMessage = errors ? errors[0].message : "";

        callback(this.validateMessage);
      });
    }
  }
};
</script>
<style lang="css">
.i-form-item-label-required:before {
  content: "*";
  color: red;
}
.i-form-item-message {
  color: red;
}
</style>